<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类目列表</title>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"
          th:href="@{/resource/css/font-awesome.min.css?v=4.4.0}"/>
    <!-- Morris -->
    <link href="http://cdn.viptool.cn/lib/morris.js/0.4.3/morris.css" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
    <link href="../../resource/hotui/js/plugins/datetimepick/css/daterangepicker.css"
          th:href="@{/resource/hotui/js/plugins/datetimepick/css/daterangepicker.css}" rel="stylesheet"/>
    <link href="../../resource/lib/bootstrap-treetable/bootstrap-treetable.css"
          th:href="@{/resource/lib/bootstrap-treetable/bootstrap-treetable.css}" rel="stylesheet"/>
    <style type="text/css">
        .nav-tabs input {
            width: 20px;
            height: 23px;
        }
    </style>
</head>

<body class="">
<div class="wrapper wrapper-content animated fadeInRight tooltip-demo" style="padding-top:0px;">
    <!--list-->
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins m-b-none">

                <div class="panel-body" id="table-container">
                    <div id="divChildren">
                        <div id="demo-toolbar" class="btn-group" role="group" aria-label="...">
                            <a href="javascript:pageHandler.add(0,0)"><span class="btn btn-info btn-sm"
                                                                            style="float: right;margin-right:5px;">添加根类目</span></a>
                        </div>
                        <table id="demo"></table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!--分类编辑-->
<input type="hidden" id="hidCatId"/>
<input type="hidden" id="hidParentCatId"/>
<input type="hidden" id="hidTargetDepth"/>
<div id="catEditModal" class="modal-content-tag">
    <div style="width:500px;">
        <div class="form-horizontal">
            <div class="form-group form-inline">
                <label class="col-sm-3 control-label" style="padding-top: 0px;">名称：</label>
                <div class="col-sm-9">
                    <div class="input-group">
                        <input type="text" id="catName" class="form-control"/>
                    </div>
                </div>
            </div>
            <div class="form-group form-inline" id="divSortNo">
                <label class="col-sm-3 control-label" style="padding-top: 0px;">排序号：</label>
                <div class="col-sm-9">
                    <div class="input-group">
                        <input type="text" id="sortNo" class="form-control only-num" value="50"/>
                    </div>
                    <span style="padding-left:5px;color:#ccc;">数字小的排前面</span>
                </div>
            </div>
            <div class="form-group form-inline jsFirst jsRate">
                <label class="col-sm-3 control-label" style="padding-top: 0px;">平台佣金比：</label>
                <div class="col-sm-9">
                    <div class="input-group">
                        <input type="text" id="commissionRate" class="form-control only-float"/>
                        <span class="input-group-addon">%</span>
                    </div>
                </div>
            </div>
            <div class="form-group form-inline jsFirst">
                <label class="col-sm-3 control-label" style="padding-top: 0px;">一级返利：</label>
                <div class="col-sm-9">
                    <div class="input-group">
                        <input type="text" id="rebateRateOne" class="form-control only-float"/>
                        <span class="input-group-addon">%</span>
                    </div>
                </div>
            </div>
            <div class="form-group form-inline jsFirst">
                <label class="col-sm-3 control-label" style="padding-top: 0px;">二级返利：</label>
                <div class="col-sm-9">
                    <div class="input-group">
                        <input type="text" id="rebateRateTwo" class="form-control only-float"/>
                        <span class="input-group-addon">%</span>
                    </div>
                </div>
            </div>
            <div class="form-group form-inline jsSecond">
                <label class="col-sm-3 control-label" style="padding-top: 0px;">是否推荐：</label>
                <div class="col-sm-9">
                    <div class="input-group">
                        <select class="form-control" id="recommendFlag" name="recommendFlag">
                            <option value="0">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group form-inline">
                <label class="col-sm-3 control-label" style="padding-top: 0px;">图片：</label>
                <div class="col-sm-9">
                    <div class="input-group">
                        <input type="hidden" name="catPic" id="catPic"/>
                        <input type="file" style="display: none" id="uploadfile" name="uploadfile"
                               readonly="readonly"
                               class="form-control">
                        <a title="选择图片">
                            <img class="imgpreview" src="../../resource/img/bg.png"
                                 onerror="this.src='/resource/img/bg.png'"
                                 style="margin-top: 10px; width:100px;height:100px;"
                            />
                        </a>
                    </div>
                </div>
            </div>
            <div class="form-group form-inline">
                <label class="col-sm-3 control-label" style="padding-top: 0px;">状态：</label>
                <div class="col-sm-9">
                    <div class="input-group">
                        <select class="form-control" id="statusCode" name="statusCode">
                            <option value="1">激活</option>
                            <option value="0">隐藏</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group form-inline">
                <label class="col-sm-3 control-label" style="padding-top: 0px;">备注：</label>
                <div class="col-sm-9">
                    <div class="input-group">
                        <input type="text" id="remark" name="remark" class="form-control"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade in" id="catListModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                        onclick="pageHandler._childrenClose()">×
                </button>
                <h4 class="modal-title" id="myModalLabel">三级类目</h4>
            </div>
            <div class="modal-body" style="padding: 10px;">
                <table class="table table-bordered table-hover table-center report-table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>名称</th>
                        <th>排序</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbCatRows">

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"
                        onclick="pageHandler._childrenClose()">关闭
                </button>
            </div>
        </div>
    </div>
</div>

<!--基础框架js-->
<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316?1234567"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316(123)}"></script>
<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>

<script src="../../resource/js/plugins/hot/Jquery.util.js" th:src="@{/resource/js/plugins/hot/Jquery.util.js?20191026}"></script>
<script src="/resource/lib/bootstrap-treetable/bootstrap-treetable.js"></script>
<script type="text/html" id="tmplRows">
    <tr>
        <td>{row}</td>
        <td>{catName}</td>
        <td>{sortNo}</td>
        <td>{statusCodeName}</td>
        <td>
            <a class="btn btn-primary btn-xs" href="javascript:pageHandler.edit('{catId}',3);">编辑</a>
            <a class="btn btn-danger btn-xs" href="javascript:pageHandler.del('{catId}',3,'{parentCatId}');">删除</a>
        </td>
    </tr>
</script>
<script type="text/javascript">
    var catEditModal = $("#catEditModal").modal("类目编辑", function (index, layerro) {
        if ($('#hidCatId').val() === '0') {
            return pageHandler._doAdd($('#hidTargetDepth').val());
        } else {
            return pageHandler._doEdit($('#hidTargetDepth').val());
        }
    });

    $(function () {
        pageHandler.init();
    });
    var pageHandler = {
        init: function () {
            this.initTreeTable();
            //上传
            $('body').delegate(".imgpreview",'click',function(){
                $("#uploadfile").click();
            });

            $('body').delegate("#uploadfile", 'change', function () {
                hotUtil.loading.show();
                hotUtil.uploadImg($("#uploadfile")[0].files, "cat", function (url, path) {
                    hotUtil.loading.close();
                    $(".imgpreview").attr("src", url);
                    $("#catPic").val(url);
                });
            });
        },
        add: function (parentId, parentDepth) {
            var self = this;
            var targetDepth = parentDepth + 1;
            $('#hidCatId').val('0');
            $('#hidTargetDepth').val(targetDepth);
            $('#hidParentCatId').val(parentId);
            catEditModal.show(function () {
                $('#divSortNo').hide();
                self._adjustForm(targetDepth);
                self._changeModalTitle('新增类目(' + targetDepth + '级)');
            });

        },
        edit: function (catId, depth) {
            var self = this;
            $('#hidCatId').val(catId);
            $('#hidTargetDepth').val(depth);
            catEditModal.show(function () {
                self._adjustForm(depth);
                self._loadData(catId);
                $('#divSortNo').show();
                self._changeModalTitle('修改类目(' + depth + '级)');
            });
        },
        viewChildren: function (parentCatId) {
            $('#tbCatRows').html('正在加载');
            $('#catListModal').show();
            var self = this;
            hot.ajax("/category/getList", {parentCatId: parentCatId}, function (apiResult) {
                if (apiResult.resultCode !== 2000) {
                    layer.msg("失败：" + data.msg);
                    return false;
                }
                var html = [];
                for (var i = 0; i < apiResult.data.length; i++) {
                    var _data = apiResult.data[i];
                    _data['row'] = i + 1;
                    var temp = $('#tmplRows').html();
                    for (var p in _data) {
                        var regExp = new RegExp("\{" + p + "\}", 'gi');
                        temp = temp.replace(regExp, _data[p]);
                    }
                    temp = temp.replace('\{statusCodeName\}', _data.statusCode == 0 ? '<span style="color: red;">隐藏</span>' : '<span style="color: green;">激活</span>')
                    html.push(temp);
                }
                $('#tbCatRows').html(html.join(''));
                return true;
            }, function () {
            }, "post", 100);
        },
        _childrenClose: function () {
            $('#catListModal').hide();
        },
        _adjustForm: function (targetDepth) {
            if (targetDepth == 1) {
                $('.jsFirst').show();
                $('.jsSecond').hide();
            } else if (targetDepth == 2) {
                $('.jsFirst').hide();
                $('.jsSecond').show();
                $(".jsRate").show();
            } else if (targetDepth == 3) {
                $('.jsFirst').hide();
                $('.jsSecond').hide();
            }
        },
        _changeModalTitle: function (title) {
            $('.layui-layer-dialog>.layui-layer-title').html(title);
        },
        _loadData: function (catId) {
            var self = this;
            hot.ajax("/category/getSingle", {catId: catId}, function (apiResult) {
                if (apiResult.resultCode !== 2000) {
                    layer.msg("失败：" + data.msg);
                    return false;
                }
                self._setFormData(apiResult.data);
                return true;
            }, function () {
            }, "post", 100);
        },
        del: function (id, targetDepth, parentCatId) {
            var self = this;
            hot.confirm('删除后将不可恢复，确定删除？', function () {
                hot.ajax("/category/del", {
                    catId: id
                }, function (apiResult) {
                    if (apiResult.resultCode === 2000) {
                        layer.msg('删除成功');
                        if (targetDepth == 3) {
                            self.viewChildren(parentCatId);
                            return false;
                        }
                        self.reload();
                    } else {
                        layer.msg("失败：" + apiResult.resultMsg);
                    }
                }, function () {
                }, "post", 100);
            });
        },
        reload: function () {
            $('#demo').bootstrapTreeTable('refresh');
        },
        _doAdd: function (targetDepth) {
            var formData = this._getFormData(targetDepth);
            if (!formData.flag) {
                alert(formData.msg);
                return false;
            }
            var self = this;
            formData.data['id'] = 0;
            hot.ajax("/category/save", formData.data, function (apiResult) {
                if (apiResult.resultCode !== 2000) {
                    layer.msg("失败：" + apiResult.resultMsg);
                    return false;
                }
                if (targetDepth <= 2) {
                    self.reload();
                } else {
                    layer.msg('添加成功');
                }
                catEditModal.hide();
                return true;
            }, function () {
            }, "post", 100);
        },
        _doEdit: function (targetDepth) {
            var formData = this._getFormData(targetDepth);
            if (!formData.flag) {
                alert(formData.msg);
                return false;
            }
            var self = this;
            formData.data['id'] = 0;
            hot.ajax("/category/save", formData.data, function (apiResult) {
                if (apiResult.resultCode !== 2000) {
                    layer.msg("失败：" + apiResult.resultMsg);
                    return false;
                }
                if (targetDepth <= 2) {
                    self.reload();
                } else {
                    self.viewChildren(formData.data.parentCatId);
                }
                catEditModal.hide();
                return true;
            }, function () {
            }, "post", 100);
        },
        _setFormData: function (data) {
            $('#catName').val(data.catName);
            $('#sortNo').val(data.sortNo);
            $('#commissionRate').val(data.commissionRate);
            $('#rebateRateOne').val(data.rebateRateOne);
            $('#rebateRateTwo').val(data.rebateRateTwo);
            $('#remark').val(data.remark);
            $('#hidParentCatId').val(data.parentCatId);
            $('#recommendFlag').val(data.recommendFlag);
            $('#catPic').val(data.catPic);
            $('#statusCode').val(data.statusCode);

            if ($('#catPic').val() != '') {
                $(".imgpreview").attr("src", $('#catPic').val());
            }
        },
        _getFormData: function (targetDepth) {
            var data = {
                catId: $('#hidCatId').val(),
                catName: $('#catName').val(),
                sortNo: $('#sortNo').val(),
                commissionRate: $('#commissionRate').val(),
                rebateRateOne: $('#rebateRateOne').val(),
                rebateRateTwo: $('#rebateRateTwo').val(),
                remark: $('#remark').val(),
                parentCatId: $('#hidParentCatId').val(),
                recommendFlag: $('#recommendFlag').val(),
                catPic: $('#catPic').val(),
                statusCode: $('#statusCode').val()
            };
            if (data.catName == '') {
                return {flag: false, msg: '名称未填写'};
            }
            if (targetDepth == '1') {
                if (data.commissionRate == '') {
                    return {flag: false, msg: '佣金比例未填写'};
                }
                if (data.rebateRateOne == '') {
                    return {flag: false, msg: '一级返利百分比未填写'};
                }
                if (data.rebateRateTwo == '') {
                    return {flag: false, msg: '二级返利百分比未填写'};
                }
            } else if (targetDepth == '2') {

            }
            return {flag: true, data: data};
        },
        initTreeTable: function (data) {
            var treeTable = $('#demo').bootstrapTreeTable({
                toolbar: "#demo-toolbar",    //顶部工具条
                expandColumn: 0,            // 在哪一列上面显示展开按钮
                height: 600,
                url: '/category/getListLevelTop2',
                id: 'catId',
                parentId: 'parentCatId',
                expandAll: true,
                columns: [
                    {
                        title: '分类名',
                        field: 'catName',
                        fixed: false,
                        width: '200',
                        formatter: function (value, row, index) {
                            if (row.depth == 1) {
                                return '<i class="fa fa-th-large"></i>&nbsp;<b>' + value + '</b>';
                            }
                            return value;
                        }
                    }, {
                        title: '分类ID',
                        field: 'catId',
                        fixed: false,
                        width: '100',
                        formatter: function (value, row, index) {
                            return value;
                        }
                    },
                    {
                        field: 'commissionRate',
                        title: '图片',
                        width: '100',
                        align: "center",
                        visible: true,
                        formatter: function (value, item, index) {
                            return value;
                        }
                    }, {
                        field: 'commissionRate',
                    title: '平台佣金比',
                    width: '100',
                    align: "center",
                    visible: true,
                    formatter: function (value, item, index) {
                        if (value == null || value == '0') return '--'
                        return value + '%';
                    }
                }, {
                    field: 'sortNo',
                    title: '排序号',
                    width: '60',
                    align: "left",
                    visible: true,
                    formatter: function (value, item, index) {
                        return '<span title="数字小的排前面">' + value + '</span>';
                    }
                }, {
                    field: 'statusCode',
                    title: '状态',
                    width: '60',
                    align: "center",
                    visible: true,
                    formatter: function (value, item, index) {
                        return value == '1' ? '<span style="color:green;">激活</span>' : '<span style="color:red;">隐藏</span>';
                    }
                }, {
                    field: 'recommendFlag',
                    title: '推荐',
                    width: '60',
                    align: "center",
                    visible: true,
                    formatter: function (value, item, index) {
                        return value == '1' ? '<span style="color:#f96;">是</span>' : '';
                    }
                }
                    , {
                        field: 'rebateRateOne',
                        title: '一级返利',
                        width: '60',
                        align: "center",
                        formatter: function (value, item, index) {
                            if (value == null || value == '0') return '--'
                            return value + '%';
                        }
                    }, {
                        field: 'rebateRateTwo',
                        title: '二级返利',
                        width: '60',
                        align: "center",
                        formatter: function (value, item, index) {
                            if (value == null || value == '0') return '--'
                            return value + '%';
                        }
                    }, {
                        field: 'createTime',
                        title: '创建时间',
                        width: '150',
                        align: "center",
                        formatter: function (value, row, index) {
                            return value.replace('T', ' ');
                        }
                    }, {
                        title: '操作',
                        width: '200',
                        align: "center",
                        formatter: function (value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs " href="javascript:pageHandler.edit(' + row.catId + ',' + row.depth + ')">编辑</a> ');
                            actions.push('<a class="btn btn-info btn-xs " href="javascript:pageHandler.add(' + row.catId + ',' + row.depth + ')">新增</a> ');
                            // actions.push('<a class="btn btn-primary btn-xs " href="javascript:pageHandler.move(' + row.catId + ',' + row.parentCatId + ')"><i class="fa fa-edit"></i>移动</a> ');
                            if (row.depth == 2) {
                                actions.push('<a class="btn btn-primary btn-xs " href="javascript:pageHandler.viewChildren(' + row.catId + ',' + row.depth + ')">查看三级</a> ');
                            }
                            actions.push('<a class="btn btn-danger btn-xs " href="javascript:pageHandler.del(' + row.catId + ')" >删除</a>');
                            return actions.join('');
                        }
                    }],
                onAll: function (data) {
                    console.log("onAll");
                    return false;
                },
                onLoadSuccess: function (data) {
                    console.log("onLoadSuccess");
                    return false;
                },
                onClickCell: function (field, value, row, $element) {
                    console.log("onClickCell", row);
                    return false;
                },
                onDblClickCell: function (field, value, row, $element) {
                    console.log("onDblClickCell", row);
                    return false;
                },
                onClickRow: function (row, $element) {
                    console.log("onClickRow", row);
                    return false;
                },
                onDblClickRow: function (row, $element) {
                    console.log("onDblClickRow", row);
                    return false;
                }
            });
        }
    };
</script>
</body>
</html>
